<template>
  <div>
    <!--搜索框-->
    <div >
      <el-form style="margin-top: 7px;" :inline="true"  class="demo-form-inline">
        <el-form-item >
          <el-input  style="background-color:transparent;border:5px;" v-model="likeusername"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="background-color: transparent;font-weight:bold;background-color: Transparent;  color: black"  @click="likeuserByname">
            搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button style="background-color: transparent;font-weight:bold;background-color: Transparent;  color: black"  @click="plateedit">
            添加板块</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--表格内容-->
    <div>
      <el-table :data="tableTheme" border style="width: 100%">
        <el-table-column fixed  label="序号" width="150">
          <template slot-scope="scope">{{ scope.$index+1}}</template>
        </el-table-column>
        <el-table-column fixed  label="创建人" width="150">
          <template slot-scope="scope">{{ scope.row.username }}</template>
        </el-table-column>
        <el-table-column label="板块" width="150">
          <template slot-scope="scope">{{ scope.row.platename }}</template>
        </el-table-column>
        <el-table-column  label="帖子数量" width="150">
          <template slot-scope="scope">{{ scope.row.platethemenumber }}</template>
        </el-table-column>
        <el-table-column  label="创建时间" width="200">
          <template slot-scope="scope">{{ scope.row.platetime }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope" >
            <el-button class="idStatus"
                       size="mini"
                       type="text"
                       color="red"
                       @click="deleteplate(scope.$index, scope.row.id)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
      <!--分页操作-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[9]"
        :page-size="queryInfo.limit"
        layout=" sizes, prev, pager, next, jumper"
        :total="queryInfo.total">
      </el-pagination>
    </div>

    <!--修改模态框-->
    <el-dialog
      title="个人信息修改"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form :label-position="labePositioln" label-width="100px" :model="platename" ref="ruleForm">

        <el-form-item label="板块名称">
          <el-input v-model="platename"></el-input>
        </el-form-item>
        <!--<el-form-item label="性别">
          <el-input v-model="Info.sex"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <el-select v-model="Info.status" placeholder="请选择权限">
            <el-option label="普通用户" value="1"></el-option>
            <el-option label="教师" value="2"></el-option>
            <el-option label="管理员" value="3"></el-option>
            <el-option label="超级管理员" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="Info.sdept"></el-input>
        </el-form-item>-->

      </el-form>

      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="modify ('ruleForm')" >确 定 添 加</el-button>
    </span>

    </el-dialog>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableTheme: [
          /*{
            classname: '2016-05-03',
            teachername: '王小虎',
            classcontent: '上海',
            classnum: '普陀区',
          },
          {
            classname: '2016-05-03',
            teachername: '王小虎',
            classcontent: '上海',
            classnum: '普陀区',
          },
          {
            classname: '2016-05-03',
            teachername: '王小虎',
            classcontent: '上海',
            classnum: '普陀区',
          },
          {
            classname: '2016-05-03',
            teachername: '王小虎',
            classcontent: '上海',
            classnum: '普陀区',
          },
          {
            classname: '2016-05-03',
            teachername: '王小虎',
            classcontent: '上海',
            classnum: '普陀区',
          },
          {
            classname: '2016-05-03',
            teachername: '王小虎',
            classcontent: '上海',
            classnum: '普陀区',
          },
          {
            classname: '2016-05-03',
            teachername: '王小虎',
            classcontent: '上海',
            classnum: '普陀区',
          },*/
        ],
        queryInfo:{
          query:'',
          //当前页数
          page:'1',
          //每页显示多少条
          limit:'5',
          total:'',
        },
        platename:'',
        dialogVisible: false,
        user:{},
      }
    },
    created() {
      this.user = JSON.parse(localStorage.getItem("user"));
      this.getAll();
    },
    methods: {
      //修改模态框
      modify: function () {
        // alert("已进入操作"+this.platename);
        // console.log(this.Info);
        this.$http
          .post('/plate/addplate', {
            'platename': this.platename,
            'userid': this.user.userid,
          })
          .then(res =>{
            if(res.data.statusCode==200) {
              this.getAll();
              this.$message("操作成功!!");
            }
          })
          .catch(error =>{
            this.$message("操作失败!!")
          })
        this.dialogVisible = false;
      },
      /*板块添加*/
      plateedit(){
        // console.log(user);
        // alert("进入方法");

        this.dialogVisible = true;
      },
      /*删除板块*/
      deleteplate(index,plateid){
        alert(plateid);
        this.$http
          .get('/plate/deleteplate',{params:{plateid:plateid}})
          .then(res => {
            if (res.data.statusCode == 200) {
              // alert("查询成功");
              this.getAll();
              this.$message({
                message: '恭喜你，删除成功',
                type: 'success'
              });
            }else{
              this.$message({
                message: '对不起，删除失败',
                type: 'warning'
              });
            }
          })
          .catch(error => {
            this.$message(error)
          })
      },
      /*查询所有班级*/
      getAll() {
        /*查询所有班级信息*/
        // alert("查询所有班级信息");
        this.$http
          .get('/plate/plates')
          .then(res => {
            if (res.data.statusCode == 200) {
              // alert("查询成功");
              this.tableTheme = res.data.data;
              console.log(this.tableTheme);
            }
          })
          .catch(error => {
            this.$message(error)
          })
      },
      /*handleClick(row) {
        console.log(row);
      },*/
      handleSizeChange(newSize) {
        // alert("每页显示条数的更新"+newSize)
        this.queryInfo.limit = newSize
        this.getAll()
        //console.log(newSize)
      },
      handleCurrentChange(newPage) {
        //alert("页码的更新"+newPage)
        this.queryInfo.page = newPage
        this.getAll();
        //console.log(newPage)
      }
    }
  }
</script>
<style>
  .main {
    padding: 20px 0;
    padding-bottom: 200px;
  }

  .main .container {
    background: #fff;
    padding: 20px;
  }

  i {
    font-style: normal;
  }

  u {
    text-decoration: none;
  }

  b {
    font-weight: normal;
  }

  a {
    color: #000;
  }

  a:hover {
    text-decoration: none;
  }

  .rt-0 {
    right: 0;
    top: 0;
  }
</style>
